<!--
	This file is part of ELCube.
	ELCube is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	ELCube is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	You should have received a copy of the GNU Affero General Public License
	along with ELCube.  If not, see <https://www.gnu.org/licenses/>.
-->
<template>
  <nk-def-card>
    <vxe-toolbar v-if="editMode">
      <template v-slot:buttons>
        <vxe-button icon="fa fa-plus" status="perfect" size="mini" @click="xTableAdd()">新增</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
            ref="xTable"
            row-key
            auto-resize
            keep-source
            resizable
            size="mini"
            border=inner
            :data="def.vars"
            :edit-config="{trigger: 'click', mode: 'row', showIcon: editMode, showStatus: true,activeMethod}">
      <vxe-column field="key"          width="8%"  title="KEY"        :edit-render="{name: '$input',props: {type: 'text',maxlength:16}}"></vxe-column>
      <vxe-column field="name"         width="15%" title="变量名"      :edit-render="{name: '$input',props: {type: 'text',maxlength:100}}"></vxe-column>
      <vxe-column field="spEL"         width="40%" title="逻辑表达式"  :edit-render="{}">
        <template v-slot:edit="{row}">
          <nk-sp-el-editor slot="edit" v-model="row.spEL" style="max-width:300px;"></nk-sp-el-editor>
        </template>
      </vxe-column>
      <vxe-column field="format"       width="10%"  title="显示格式"   :edit-render="{name: '$select',props: {
        options:[{
          value:'',label:'默认'
        },{
          value:'nkNumber',label:'数值'
        },{
          value:'nkCurrency',label:'货币'
        },{
          value:'nkPercent',label:'百分比'
        },{
          value:'nkDatetime',label:'日期'
        }]
      }}"></vxe-column>
      <vxe-column field="desc"         width="20%"  title="逻辑描述"   :edit-render="{name: '$input',props: {type: 'text',maxlength:100}}"></vxe-column>
      <vxe-column >
        <template v-slot="{seq,items}">
          <span v-if="editMode" class="drag-btn" style="margin-right: 10px;">
            <a-icon type="swap" :rotate="90" />
          </span>
          <span v-if="editMode" style="margin-right: 10px;" @click="$nkSortableRemove(def.vars,seq)">
            <a-icon type="delete" />
          </span>
        </template>
      </vxe-column>
    </vxe-table>

  </nk-def-card>
</template>

<script>
  import MixinDef from "MixinDef";
  import MixinSortable from "MixinSortable";

  export default {
    mixins:[new MixinDef({vars:[]}),MixinSortable()],
    computed:{
    },
    created() {
      this.$nkSortableVxeTable(true);
    },
    methods:{
      activeMethod(){return this.editMode;},
      xTableAdd(){
        if(!this.def.vars){
          this.$set(this.def,'vars',[]);
        }
        const row = {format:undefined};
        this.def.vars.push(row);
        this.$refs.xTable.setActiveRow(row);
      }
    }
  }
</script>

<style scoped>

</style>